<!--
 * @Description: 设备 - 单点配置项
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-04 14:21:49
 * @LastEditTime: 2021-11-10 17:23:37
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="12" :lg="8">
      <div class="device device-ne">
        <div class="title">
          <i class="iconfont" style="color: #95DE64; background: rgba(149, 222, 100, 0.15)">&#xe6b2;</i>
          设备信息
          <el-button icon="el-icon-sort" type="text" @click="cancel">切换</el-button>
        </div>
        <div class="content">
          <div class="ne-left">
            <template v-if="ne.neLayer === 'Access'">
              <img src="/static/images/cpe.png" />
            </template>
            <template v-else>
              <img src="/static/images/pop.png" />
            </template>
            <div v-show="ne.managementState === 'ONLINE'">
              <span v-if="ne.connectionState === 'CONNECTED'">
                <i class="i-success"></i>
                链接
              </span>
              <span v-if="ne.connectionState === 'DISCONNECTED'">
                <i class="i-error"></i>
                断链
              </span>
            </div>
            <span v-show="ne.connectionState === 'UNKNOWN'">
              <i class="i-warning"></i>
              未知
            </span>
          </div>
          <div class="ne-right">
            <ul>
              <li>
                <label>名称</label>
                <span>{{ne.userlabel}}</span>
              </li>
              <li>
                <label>类型</label>
                <span>{{ne.typeLabel ? ne.typeLabel.replace('-', ' ') : ne.type.replace('-', ' ')}}</span>
              </li>
              <li>
                <label>型号</label>
                <span>{{ne.subTypeLabel ? ne.subTypeLabel.replace('_', ' ') : ne.subType.replace('_', ' ')}}</span>
              </li>
              <li>
                <label>软件SN</label>
                <span>{{ne.extAttrs.esn | filterSN}}</span>
              </li>
              <li>
                <label>IP</label>
                <span>{{ne.ipAddress}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="8">
      <div class="device device-site">
        <div class="title">
          <i class="el-icon-office-building" style="color: #fff; background: #2d8cf0"></i> 站点信息
        </div>
        <div class="content">
          <ul>
            <li>
              <label>名称</label>
              <span>{{ne.extAttrs.site.sitename}}</span>
            </li>
            <li>
              <label>类型</label>
              <span>{{ne.extAttrs.site.siteType}}</span>
            </li>
            <li>
              <label>责任人</label>
              <span>{{ne.extAttrs.site.personLiable}}</span>
            </li>
            <li>
              <label>手机号</label>
              <span>{{ne.extAttrs.site.telephone}}</span>
            </li>
            <li>
              <label>地址</label>
              <span>{{ne.extAttrs.site.extAttrs.specificAddress}}</span>
            </li>
          </ul>
        </div>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="8">
      <div class="device device-options">
        <div class="title">
          <i
            class="iconfont icon-caidanguanli"
            style="color: #1890FF; background-color: rgb(230, 247, 255)"
          ></i> 配置项
        </div>
        <div class="content">
          <ul>
            <li
              v-for="(item, idx) in option"
              :key="idx"
              :class="idx === index ? 'hover' : ''"
              @click="handleTabs(idx)"
            >
              <i :class="item.icon"></i>
              {{item.title}}
            </li>
          </ul>
        </div>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="24">
      <template v-if="ne.neLayer === 'Access'">
        <el-tabs v-model="active" class="tabs-box" type="card">
          <el-tab-pane v-if="index === 0" label="流量过滤" name="acl">
            <acl :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 1" label="应用识别" name="application">
            <application :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 1" label="应用选路" name="str">
            <str :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 1" label="DSCP" name="dscp">
            <dscp :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 1" label="带宽保证" name="qos">
            <qos :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 1" label="上网权限管理" name="auth">
            <auth :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 2" label="PING" name="ping">
            <ping :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 2" label="TCP PING" name="tcpPing">
            <tcp-ping :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 2" label="Trace" name="trace">
            <trace :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 2" label="抓包" name="grap">
            <packet :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 2" label="版本升级" name="upgrade">
            <upgrade :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 2" label="端口镜像" name="portMirror">
            <port-mirror :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 2" label="GRE隧道" name="gre">
            <gre :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 2" label="告警信息" name="alarms">
            <alarms :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 3" label="前缀列表" name="preList">
            <preList :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 3" label="静态路由" name="netroute">
            <netroute :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 3" label="BGP配置" name="bgp">
            <bgp :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 3" label="OSPF配置" name="ospf">
            <ospf :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 3" label="设备路由查询" name="deviceRouting">
            <neroute :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 4" label="TCPMSS" name="tcpmss">
            <tcpmss :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 4" label="以太口配置" name="ethernet">
            <ethernet :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 5" label="多路复制保护组" name="multipe">
            <multiple :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 5" label="前向纠错" name="fec">
            <fec :ne="ne" />
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-else>
        <el-tabs v-model="active" class="tabs-box" type="card">
          <el-tab-pane v-if="index === 0" label="PING" name="ping">
            <ping :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 0" label="TCP PING" name="tcpPing">
            <tcp-ping :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 0" label="Trace" name="trace">
            <trace :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 0" label="版本升级" name="upgrade">
            <upgrade :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 1" label="静态NAT" name="nat">
            <nat :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 2" label="告警信息" name="alarms">
            <alarms :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 3" label="前缀列表" name="preList">
            <preList :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 3" label="BGP配置" name="bgp">
            <bgp :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 3" label="OSPF配置" name="ospf">
            <ospf :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 3" label="设备路由查询" name="deviceRouting">
            <neroute :ne="ne" />
          </el-tab-pane>
          <el-tab-pane v-if="index === 4" label="以太口配置" name="ethernet">
            <ethernet :ne="ne" />
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-col>
  </el-row>
</template>

<script>
import acl from '../acl';
import application from '../application';
import netroute from '../netroute';
import tcpmss from '../tcpmss';
import qos from '../qos';
import dscp from '../dscp';
import str from '../str';
import trace from '../trace';
import ping from '../ping';
import tcpPing from '../tcpPing';
import portMirror from '../portMirror';
import alarms from '../alarms';
import upgrade from '../upgrade';
import nat from '../nat';
import bgp from '../bgp';
import ospf from '../ospf';
import ethernet from '../ethernet';
import packet from '../packet';
import auth from '../auth';
import neroute from '../neroute';
import gre from '../gre';
import preList from '../preList';
import multiple from '../multiple';
import fec from '../fec';
export default {
  props: ['ne'],
  components: {
    acl,
    application,
    netroute,
    tcpmss,
    qos,
    dscp,
    str,
    trace,
    ping,
    tcpPing,
    portMirror,
    alarms,
    upgrade,
    nat,
    bgp,
    ospf,
    ethernet,
    packet,
    auth,
    neroute,
    gre,
    preList,
    multiple,
    fec
  },
  created () {
    let jump = JSON.parse(sessionStorage.getItem('jump'));
    if (jump.neId) {
      let _this = this;
      _this.ne.neLayer = jump.type === 'CPE' ? 'Access' : 'Mixed';
      _this.handleTabs(jump.tag === 'bgp' ? 3 : 1);
      setTimeout(() => {
        _this.active = jump.tag;
      }, 100);
      sessionStorage.removeItem('jump');
    }
  },
  data () {
    return {
      option: [],
      index: 0,
      active: null
    };
  },
  watch: {
    'ne.neLayer': {
      immediate: true,
      handler (val) {
        if (val === 'Access') {
          this.option = [{
            icon: 'el-icon-set-up',
            title: '业务安全'
          }, {
            icon: 'el-icon-copy-document',
            title: '应用体验'
          }, {
            icon: 'el-icon-stopwatch',
            title: '设备运维'
          }, {
            icon: 'el-icon-guide',
            title: '网元路由'
          }, {
            icon: 'el-icon-link',
            title: '设备接口'
          }, {
            icon: 'el-icon-connection',
            title: '广域网优化'
          }];
          this.active = 'acl';
        } else {
          this.option = [{
            icon: 'el-icon-stopwatch',
            title: '设备运维'
          }, {
            icon: 'el-icon-news',
            title: '静态NAT'
          }, {
            icon: 'el-icon-chat-line-square',
            title: '告警信息'
          }, {
            icon: 'el-icon-guide',
            title: '网元路由'
          }, {
            icon: 'el-icon-link',
            title: '以太口配置'
          }];
          this.active = 'ping';
        }
      }
    }
  },
  methods: {
    // 返回
    cancel () {
      let _this = this;
      _this.$emit('handleChange', 0);
    },
    // 点选
    handleTabs (idx) {
      let _this = this;
      this.index = idx;
      if (_this.ne.neLayer === 'Access') {
        switch (idx) {
          case 0:
            _this.active = 'acl';
            break;
          case 1:
            _this.active = 'application';
            break;
          case 2:
            _this.active = 'ping';
            break;
          case 3:
            _this.active = 'preList';
            break;
          case 4:
            _this.active = 'tcpmss';
            break;
          case 5:
            _this.active = 'multipe';
            break;
          default:
            _this.active = 'acl';
            break;
        }
      } else {
        switch (idx) {
          case 0:
            _this.active = 'ping';
            break;
          case 1:
            _this.active = 'nat';
            break;
          case 2:
            _this.active = 'alarms';
            break;
          case 3:
            _this.active = 'preList';
            break;
          case 4:
            _this.active = 'ethernet';
            break;
          default:
            _this.active = 'ping';
            break;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.device {
  width: 100%;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  border-radius: 3px;
  margin-bottom: 20px;
  .title {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
    font-size: 15px;
    i {
      border-radius: 50%;
      padding: 3px;
      margin-left: 10px;
    }
  }
}
.device-ne {
  ::v-deep .el-button {
    float: right;
    margin-right: 12px;
    padding: 0;
  }
  .content {
    display: inline-block;
    width: 100%;
    .ne-left {
      float: left;
      width: 120px;
      img {
        display: block;
        width: 80px;
        margin: 0 auto;
        margin-top: 50px;
      }
      span {
        display: block;
        width: 100%;
        text-align: center;
        i {
          position: relative;
          display: inline-block;
          border-radius: 50%;
          width: 10px;
          height: 10px;
          top: 0;
          left: -10px;
          &.i-success {
            background: #19be6b;
          }
          &.i-error {
            background: #ed4014;
          }
          &.i-warning {
            background: #f90;
          }
          @keyframes scale {
            0% {
              transform: scale(1.1);
            }
            50%,
            75% {
              transform: scale(1.3);
            }
            78%,
            100% {
              opacity: 0;
            }
          }
          @keyframes scales {
            0% {
              transform: scale(1.1);
            }
            50%,
            75% {
              transform: scale(1.5);
            }
            78%,
            100% {
              opacity: 0;
            }
          }
        }
        i::before {
          position: absolute;
          top: -1px;
          left: -1px;
          content: "";
          display: block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          opacity: 0.6;
          animation: scale 3s infinite cubic-bezier(0, 0, 0.49, 1.02);
        }
        .i-success::before {
          background: #19be6b;
        }
        .i-error::before {
          background: #ed4014;
        }
        .i-warning::before {
          background: #f90;
        }
      }
    }
    .ne-right {
      width: calc(100% - 120px);
      float: right;
      ul {
        width: 100%;
        padding: 11px 0;
        li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-bottom: 3px;
          label {
            display: inline-block;
            text-align: center;
            color: #333;
            font-size: 14px;
            line-height: 32px;
            width: 80px;
            background: #f8f8f9;
          }
          span {
            font-size: 14px;
            line-height: 32px;
            color: #333;
            width: calc(100% - 105px);
            padding: 0 10px;
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
.device-site {
  .content {
    padding: 11px;
    ul {
      width: 100%;
      li {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 3px;
        label {
          display: inline-block;
          text-align: center;
          color: #333;
          font-size: 14px;
          line-height: 32px;
          width: 80px;
          background: #f8f8f9;
        }
        span {
          display: inline-table;
          font-size: 14px;
          line-height: 32px;
          color: #333;
          width: calc(100% - 105px);
          padding: 0 10px;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
.device-options {
  .content {
    padding: 10px;
    ul {
      display: inline-block;
      width: 100%;
      height: 172px;
      overflow: hidden;
      li {
        width: 33.33333333%;
        height: 76px;
        float: left;
        text-align: center;
        font-size: 14px;
        padding: 5px 0;
        cursor: pointer;
        &:hover {
          color: #3296fa;
          i {
            color: #3296fa;
          }
        }
        i {
          display: block;
          font-size: 30px;
          text-align: center;
          margin: 10px 0;
        }
      }
      .hover {
        color: #3296fa;
        i {
          color: #3296fa;
        }
      }
      &:last-child::after {
        overflow: hidden;
        content: "";
        clear: both;
      }
    }
  }
}
.tabs-box {
  background: #fff;
  padding: 10px;
}
</style>